<template>
  <div class="feedback">
    <div class="item-h layui-nav" lay-filter>
      <a href="javascript:void(0)" class="layui-nav-item ftz16 layui-this">意见反馈</a>
      <!-- <a href="javascript:void(0)" class="layui-nav-item ftz16">历史反馈</a> -->
    </div>
    <div class="list">
      <!-- 意见反馈 -->
      <form class="layui-form op" action="" list>
        <div class="layui-form-item">
          <label class="layui-form-label">
            <i class="must">*</i>详细描述：</label>
          <div class="layui-input-block">
            <textarea v-model="feedbackData.content" placeholder="请输入详细描述"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">问题截图：</label>
          <div class="layui-inline" v-if="feedbackData.pictureUrl">
            <img :src="feedbackData.pictureUrl" style="width:182px;height:122px;">
            <img @click="removeImg()" class="delete-icon" src="../../assets/delete.png" alt="">
          </div>
          <div class="layui-inline">
            <button type="button" id="up_load">
              <img src="../../assets/res/img/up_img.png" class="up-img">
            </button>
            <i class="tip" style="vertical-align: bottom;">每张图片大小为500K以内</i>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">联系电话：</label>
          <div class="layui-input-block">
            <input type="text" v-model="feedbackData.phone" name="phone" required class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">QQ号码：</label>
          <div class="layui-input-block">
            <input type="text" v-model="feedbackData.qq" name="QQ" required class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">微信号：</label>
          <div class="layui-input-block">
            <input type="text" v-model="feedbackData.wechat" name="wechat" required class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <span class="tip">以上三种联系方式必填一种</span>
          </div>
        </div>
        <button type="button" @click="addFeedback()" class="submit">提交</button>
      </form>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import * as api from '@/service/api'
import cookie from '@/utils/cookie'
export default {
  data () {
    return {
      loading: false,
      feedbackData: {
        pictureUrl: '',
        content: '',
        source: '2',
        phone: '',
        qq: '',
        wechat: ''
      }
    }
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curRoute () {
      return this.$route.path
    },
    ...mapState({
      me: state => state.me
    })
  },
  mounted () {
    window.layui.use(['form', 'layedit', 'upload'], () => {
      let upload = window.layui.upload
      upload.render({
        elem: '#up_load',
        url: api.uploadUrl,
        multiple: true,
        size: 500,
        headers: {
          accessToken: cookie.get('device_id')
        },
        before: (obj) => {
        },
        done: (res) => {
          this.feedbackData.pictureUrl = res.data.src
        }
      })
      var layedit = window.layui.layedit
      this.layeditIndex = layedit.build('edit', {
        uploadImage: {
          url: `${api.uploadUrl}&accessToken=${cookie.get('device_id')}`
        }
      })
    })
  },
  methods: {
    removeImg () {
      this.feedbackData.pictureUrl = ''
    },
    async addFeedback () {
      if (!this.feedbackData.content) {
        layer.msg('请输入描述', {
          icon: 2
        })
        return false
      }
      if (!this.feedbackData.phone.length && !this.feedbackData.qq.length && !this.feedbackData.wechat.length) {
        layer.msg('请输入联系方式', {
          icon: 2
        })
        return false
      }
      await api.addFeedback(this.feedbackData)
      this.feedbackData = {
        pictureUrl: '',
        content: '',
        source: '2',
        phone: '',
        qq: '',
        wechat: ''
      }
      layer.msg('提交成功')
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/res/feedback";
.must {
  color: red;
  padding-right: 5px;
}
.feedback .layui-form-label {
  width: 85px !important;
}
.delete-icon {
  position: absolute;
  top: 5px;
  right: 5px;
}
.delete-icon:hover {
  opacity: 0.7;
}
</style>
